<template>
  <div class="add-wrapper">
    <div class="top">
      <div class="title-wrapper">
        <div
          v-for="(item, index) of title"
          :key="index"
          class="title"
          @click="titleClick(index)"
        >{{ item }}</div>
      </div>
    </div>
    <div class="step">
      <el-steps :active="active" align-center>
        <el-step title="编辑商品信息" />
        <el-step title="编辑商品详情" />
      </el-steps>
    </div>
    <div class="middle">
      <component
        :is="cmpName"
        :id="id"
        :step-one-detail="stepOneDetail"
        :classification-list="classificationList"
        :brand-list="brandList"
        @next="next"
        @prev="handlePrev"
        @finish="handleFinish"
      />
    </div>
  </div>
</template>
<script>
import StepOne from './step1'
import StepTwo from './step2'
import { getClassificationList, getBrandList, getGoodsDetailStepOne } from '@/api/goods'
import { mapGetters } from 'vuex'
const ERR_OK = 200
export default {
  data() {
    return {
      title: ['商品', '/编辑商品'],
      active: 0,
      cmpName: StepOne,
      classificationList: [],
      brandList: [],
      id: '',
      stepOneDetail: {},
      coverList: [],
      carouselList: [],
      videoList: []

    }
  },
  computed: {
    ...mapGetters(['edit_type', 'goods_id'])
  },
  mounted() {
    Promise.all([this._getClassificationList(), this._getBrandList()])
      .then((res) => {
        if (this.edit_type) {
          this._getGoodsDetailStepOne(this.goods_id)
        }
      })
  },
  methods: {
    titleClick(index) {
      this.$emit('titleClick', index)
    },
    next(id) {
      if (this.active++ > 1) this.active = 0
      this.cmpName = StepTwo
      this.id = id
    },
    handleFinish() {
      this.$emit('titleClick', 0)
    },
    handlePrev() {
      this.active--
      this.cmpName = StepOne
      this._getGoodsDetailStepOne(this.id)
    },
    _getClassificationList() {
      return new Promise((resolve, reject) => {
        getClassificationList()
          .then(res => {
            if (res.code === ERR_OK) {
              this.classificationList = res.data
            }
            resolve()
          })
          .catch(err => {
            console.log(err)
            reject()
          })
      })
    },
    _getBrandList() {
      return new Promise((resolve, reject) => {
        getBrandList()
          .then(res => {
            if (res.code === ERR_OK) {
              this.brandList = res.data
            }
            resolve()
          })
          .catch(err => {
            console.log(err)
            reject()
          })
      })
    },
    _getGoodsDetailStepOne(id) {
      return new Promise((resolve, reject) => {
        getGoodsDetailStepOne(id)
          .then(res => {
            if (res.code === ERR_OK) {
              console.log(res)
              this.stepOneDetail = res.data
            }
          })
          .catch(err => {
            console.log(err)
          })
      })
    }
  }
}
</script>
<style lang="scss" scoped>
.add-wrapper {
  padding: 0 20px;
  box-sizing: border-box;
  .top {
    width: 100%;
    box-sizing: border-box;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 0;
    .title-wrapper {
      display: flex;
      align-content: center;
      .title {
        height: 44px;
        line-height: 44px;
        color: rgba(68, 68, 68, 1);
        font-size: 18px;
        font-family: Roboto;
        font-weight: bold;
        cursor: pointer;
      }
    }
  }
  .step {
    padding: 0 195px;
    padding-bottom: 17px;
    border-bottom: 1px solid #eee;
    box-sizing: border-box;
    .el-step /deep/ .el-step__title {
      font-size: 17px;
      margin-top: 10px;
      font-weight: bold;
    }
  }
  .middle {
    padding: 25px 80px;
    box-sizing: border-box;
  }
}
</style>
